<template>
  <!--页面布局-->
  <div>

    <hr style="width: 70%" height="20px">
    <h2 style="margin-left: 700px">我的消息</h2>
    <hr style="width: 70%" height="20px">
    <el-container>
      <el-aside width="200px"></el-aside>

      <el-tabs :tab-position="tabPosition" style="height: 600px;">
        <el-tab-pane label="@我的"></el-tab-pane>
        <el-tab-pane label="私信"></el-tab-pane>
        <el-tab-pane label="评论"></el-tab-pane>
        <el-tab-pane label="通知"></el-tab-pane>
      </el-tabs>
      <el-main>
        <!--页面内容-->

        <div id="context">
          <h4 style="float: left">@我的</h4>
          <h4 style="float: right">删除所有</h4>
          <hr height="40px" width="100%" color="#66fffc">
        </div>

        <!--消息区域-->
        <div>
          <el-row>
            <el-col :span="2">
              <img src="http://qhwykybp2.hd-bkt.clouddn.com/004.jpg" style="width: 100px" height="100px">
            </el-col>
            <el-row>
              <span style="float:left;margin-left: 30px;color: red;font-size: 20px">云音乐福利:</span>
              <span style="float:right;margin-right: 20px">时间</span><br>
              <span style="float: left">恭喜你到达1级，快去看看有哪些新的特权吧！</span>
            </el-row>
            <hr color="#66fffc" height="20px">
          <!--  <el-row style="float:right;margin-right: 20px">
              <a>时间</a>
            </el-row>-->
          <!-- <el-row style="float:left;margin-left: 140px">
              <span>恭喜你到达1级，快去看看有哪些新的特权吧！恭喜你到达1级，快去看看有哪些新的特权吧！</span>
            </el-row>-->
            <el-col :span="2">
              <img src="http://qhwykybp2.hd-bkt.clouddn.com/1.png" style="width: 100px" height="100px">
            </el-col>
            <el-row>
              <span style="float:left;margin-left: 30px;color: red;font-size: 20px">云音乐福利:</span>
              <span style="float:right;margin-right: 20px">时间</span><br>
              <span style="float: left">恭喜你到达1级，快去看看有哪些新的特权吧！</span>
            </el-row>
            <hr color="#66fffc" height="20px">
            <el-col :span="2">
              <img src="http://qhwykybp2.hd-bkt.clouddn.com/2.jpg" style="width: 100px" height="100px">
            </el-col>
            <el-row>
              <span style="float:left;margin-left: 30px;color: red;font-size: 20px" >云音乐福利:</span>
              <span style="float:right;margin-right: 20px">时间</span><br>
              <span style="float: left">恭喜你到达1级，快去看看有哪些新的特权吧！</span>
            </el-row>
            <hr color="#66fffc" height="20px">
            <el-col :span="2">
              <img src="http://qhwykybp2.hd-bkt.clouddn.com/3.jpg" style="width: 100px" height="100px">
            </el-col>
            <el-row>
              <span style="float:left;margin-left: 30px;color: red;font-size: 20px">云音乐福利:</span>
              <span style="float:right;margin-right: 20px">时间</span><br>
              <span style="float: left">恭喜你到达1级，快去看看有哪些新的特权吧！</span>
            </el-row>
            <hr color="#66fffc" height="20px">

          </el-row>
        </div>

        <div>


        </div>

      </el-main>

      <el-aside width="200px"></el-aside>
    </el-container>


  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tabPosition: 'left',
      currentDate: new Date(),
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.time {
   font-size: 13px;
   color: #999;
 }

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
